<template>
	<div class="main">
		<div class="swiper">
			<van-swipe
				class="my-swipe"
				:autoplay="3000"
				indicator-color="white"
			>
				<van-swipe-item>
					<img src="@/images/swipe_03.jpg" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img src="@/images/demo-1.jpg" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img src="@/images/demo-2.jpg" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img src="@/images/demo-3.jpg" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="menu">
			<router-link to="/kill">
				<img src="@/images/small_03.jpg" alt="" />秒杀活动
			</router-link>
			<router-link to="/team">
				<img src="@/images/small_03.jpg" alt="" />拼团活动
			</router-link>
			<router-link to="/shoplist">
				<img src="@/images/small_03.jpg" alt="" />商品分类
			</router-link>
			<a href="javascript:;">
				<img src="@/images/small_09.jpg" alt="" />
				<span>商品分类</span>
			</a>
			<a href="javascript:;">
				<img src="@/images/small_11.jpg" alt="" />
				<span>商品分类</span>
			</a>
			<a href="javascript:;">
				<img src="@/images/small_18.jpg" alt="" />
				<span>商品分类</span>
			</a>
			<a href="javascript:;">
				<img src="@/images/small_19.jpg" alt="" />
				<span>商品分类</span>
			</a>
			<a href="javascript:;">
				<img src="@/images/small_20.jpg" alt="" />
				<span>商品分类</span>
			</a>
			<a href="javascript:;" @click="tozb">
				<img src="@/images/small_21.jpg" alt="" />
				<span>直播特卖</span>
			</a>
			<a href="javascript:;" @click="tokj">
				<img src="@/images/small_22.jpg" alt="" />
				<span>砍价活动</span>
			</a>
		</div>
		<div class="chaozhi">
			<div class="chaozhi-t">
				<p>
					<b>超值爆款</b>
					<span>美好生活由此开始</span>
				</p>
			</div>
			<div class="chaozhi-b">
				<dl class="chaozhidl">
					<dt>
						<h3>首发新品</h3>
						<p>最新出炉</p>
						<b>
							GO!
							<span>></span>
						</b>
					</dt>
					<dd>
						<img
							src="../../../assets/images/imgjing_03.jpg"
							alt=""
						/>
					</dd>
				</dl>
				<dl>
					<dt>
						<h3>首发新品</h3>
						<p>最新出炉</p>
						<b>
							GO!
							<span>></span>
						</b>
					</dt>
					<dd>
						<img
							src="../../../assets/images/imgjing_03.jpg"
							alt=""
						/>
					</dd>
				</dl>
				<dl>
					<dt>
						<h3>首发新品</h3>
						<p>最新出炉</p>
						<b>
							GO!
							<span>></span>
						</b>
					</dt>
					<dd>
						<img
							src="../../../assets/images/imgjing_03.jpg"
							alt=""
						/>
					</dd>
				</dl>
				<dl>
					<dt>
						<h3>首发新品</h3>
						<p>最新出炉</p>
						<b>
							GO!
							<span>></span>
						</b>
					</dt>
					<dd>
						<img
							src="../../../assets/images/imgjing_03.jpg"
							alt=""
						/>
					</dd>
				</dl>
			</div>
		</div>
		<div class="imgbox">
			<van-swipe
				class="my-swipes"
				:autoplay="3000"
				indicator-color="white"
			>
				<van-swipe-item>
					<img class="imgboxs" src="@/images/swipe_03.jpg" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img class="imgboxs" src="@/images/demo-1.jpg" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img class="imgboxs" src="@/images/demo-2.jpg" alt="" />
				</van-swipe-item>
				<van-swipe-item>
					<img class="imgboxs" src="@/images/demo-3.jpg" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="killbox">
			<div class="kill-t">
				<b class="kill-t-b">
					限时秒杀 | 08:00,20:00 场
					<span>00:00</span>
				</b>
				<b class="kill-t-b2">
					更多
					<span>></span>
				</b>
			</div>
			<div class="kill-b">
				<dl
					v-for="(item, index) in data"
					:key="index"
					@click="ToDetail(item)"
				>
					<dt>
						<img src="@/img/1.png" style="width: 100px" alt="" />
					</dt>
					<dd>
						<p>{{ item.title }}</p>
						<b>￥{{ item.price }}</b>
					</dd>
				</dl>
			</div>
		</div>
		<div class="pin">
			<div class="pin-t">
				<p>
					<img src="../../../assets/images/imgsmall_03.jpg" alt="" />
					<b>拼团惠</b>
					<span>享超值开团价</span>
				</p>
				<span>超值精选</span>
			</div>
			<div class="pin-b">
				<dl
					v-for="(item, index) in data"
					:key="index"
					@click="ToDetail(item)"
				>
					<dt>
						<img src="@/img/1.png" style="width: 100px" alt="" />
					</dt>
					<dd>
						<b>￥{{ item.price }}</b>
					</dd>
				</dl>
			</div>
		</div>
		<div class="pin">
			<div class="pin-t">
				<p>
					<img src="../../../assets/images/imgsmall_03.jpg" alt="" />
					<b>拼团惠</b>
					<span>享超值开团价</span>
				</p>
				<span>超值精选</span>
			</div>
			<div class="pin-b">
				<dl
					v-for="(item, index) in data"
					:key="index"
					@click="ToDetail(item)"
				>
					<dt>
						<img src="@/img/1.png" style="width: 100px" alt="" />
					</dt>
					<dd>
						<b>￥{{ item.price }}</b>
					</dd>
				</dl>
			</div>
		</div>
		<div class="navs">
			<div
				class="da"
				v-for="(item, index) in navlist"
				:key="index"
				@click="actives(navlist, index)"
			>
				<p>{{ item.pp }}</p>
				<span :class="activeIndex === index ? 'active' : ''">
					{{ item.xx }}
				</span>
			</div>
		</div>
		<div class="shop" :style="{ height: shopHeight }">
			<dl
				ref="shopRef"
				v-for="(item, index) in list"
				:key="index"
				@click="ToDetail(item)"
				:style="styleList[index]"
			>
				<dt>
					<img
						src="@/img/1.png"
						:style="{ height: heightList[index] }"
						alt=""
					/>
				</dt>
				<dd>
					<p>{{ item.title }}</p>
					<b>￥{{ item.price }}</b>
				</dd>
			</dl>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			data: [],
			list: [],
			MAX_ITEM_HEIGHT: 255,
			MIN_ITEM_HEIGHT: 150,
			styleList: [],
			heightList: [],
			shopHeight: 0,
			activeIndex: 0,
			navlist: [],
			childrenlist: [],
		};
	},
	created() {
		this.$api.homeData().then((res) => {
			this.data = res.data;
		});
		this.$api.homeList().then((res) => {
			this.list = res.list;
			this.getRandomHeight();
			this.$nextTick(() => {
				this.setStylePosition();
			});
		});
		this.$api.navList().then((res) => {
			this.navlist = res.navlist;
			this.actives(this.navlist, 0);
		});
	},
	methods: {
		actives(navlist, ind) {
			this.activeIndex = ind;
			this.list = navlist[ind].children;
		},
		tokj() {
			if (localStorage.getItem("key")) {
				this.$router.push("/examine");
			} else {
				this.$router.push("/bargain");
			}
		},
		tozb() {
			this.$router.push("/streaming");
		},
		setStylePosition() {
			// 1. 设置两个初始变量 leftHeightTotal rightHeightTotal
			// 2. 遍历元素的时候 比对 leftHeightTotal 和  rightHeightTotal
			// 如果leftHeightTotal <= rightHeightTotal 则left = 0 top = leftHeightTotal + maiginTop
			let leftHeightTotal = 0,
				rightHeightTotal = 0,
				marginTop = 10;
			this.$refs.shopRef.forEach((item) => {
				let styleObj = {};
				if (leftHeightTotal <= rightHeightTotal) {
					styleObj = {
						left: "0",
						top: leftHeightTotal + marginTop + "px",
					};
					leftHeightTotal += item.clientHeight + marginTop;
				} else {
					styleObj = {
						right: "0",
						top: rightHeightTotal + marginTop + "px",
					};
					rightHeightTotal += item.clientHeight + marginTop;
				}
				this.styleList.push(styleObj);
			});
			this.shopHeight =
				leftHeightTotal >= rightHeightTotal
					? leftHeightTotal
					: rightHeightTotal;
		},
		getRandomHeight() {
			this.list.forEach(() => {
				this.heightList.push(
					Math.floor(
						Math.random() *
							(this.MAX_ITEM_HEIGHT - this.MIN_ITEM_HEIGHT + 1) +
							this.MIN_ITEM_HEIGHT
					) + "px"
				);
			});
		},
		ToDetail(item) {
			console.log(item);
		},
	},
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.main {
	padding: 0 px2rem(10);
	margin-top: px2rem(10);
}
.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	text-align: center;
	img {
		width: px2rem(363);
		height: px2rem(144);
	}
	.swiperitem {
		border-radius: px2rem(10);
	}
	.imgboxs {
		width: px2rem(357);
		height: px2rem(124);
		border-radius: px2rem(10);
	}
}
.my-swipes .van-swipe-item {
	color: #fff;
	font-size: 20px;
	text-align: center;
	border-radius: px2rem(10);
	img {
		width: px2rem(363);
		height: px2rem(144);
	}
	.imgboxs {
		width: px2rem(357);
		height: px2rem(124);
		border-radius: px2rem(10);
	}
}
.menu {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: px2rem(0) px2rem(10);
	a {
		width: calc(100% / 5);
		height: auto;
		text-align: center;
		margin: px2rem(14) 0;
		color: #333;
		font-size: px2rem(14);
	}
	img {
		width: px2rem(70px);
		height: px2rem(70px);
		display: block;
		margin: px2rem(10px) auto;
		margin: 0 auto;
		padding-bottom: px2rem(5);
	}
}
.chaozhi {
	width: 100%;
	height: px2rem(255);
	border-radius: 15px;
	background: #ffe5e3;
	padding: 0 px2rem(10);
	.chaozhi-t {
		width: 100%;
		height: px2rem(47);
		font-size: px2rem(16);
		display: flex;
		align-items: center;
		color: #fc585a;
		span {
			margin-left: px2rem(10);
			background: #ffa201;
			font-size: px2rem(12);
			padding: px2rem(4);
			color: #fff;
			border-radius: px2rem(10) 0 px2rem(10) 0;
		}
	}
	.chaozhi-b {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		dl {
			width: px2rem(164);
			height: px2rem(92);
			background: #fff;
			border-radius: px2rem(15);
			margin: px2rem(5) 0;
			display: flex;
			padding: 0 px2rem(8);
			justify-content: space-between;
			dt {
				line-height: px2rem(20);
				h3 {
					font-size: px2rem(16);
					margin-top: px2rem(18);
				}
				p {
					font-size: px2rem(12);
					color: #aba6a6;
				}
				b {
					font-size: px2rem(12);
					background: #64d54d;
					color: #fff;
					padding: px2rem(5);
					border-radius: px2rem(15);
					span {
						// width: px2rem(15);
						// height: px2rem(15);
						padding: 0 px2rem(3);
						margin-left: px2rem(5);
						background: #fff;
						color: #64d54d;
						border-radius: 50%;
					}
				}
			}
			dd {
				display: flex;
				align-items: center;
			}
		}
	}
}
.imgbox {
	margin-top: px2rem(10);
}
.killbox {
	width: 100%;
	height: px2rem(213);
	background: #dfedfa;
	border-radius: px2rem(10);
	padding: 0 px2rem(10);
	.kill-t {
		width: 100%;
		height: px2rem(42);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.kill-t-b {
			font-size: px2rem(16);
			color: #06a6f9;
			span {
				color: #000;
				font-weight: 200;
			}
		}
		.kill-t-b2 {
			font-size: px2rem(12);
			background: #39bdff;
			color: #fff;
			padding: 0 px2rem(5);
			border-radius: px2rem(10);
		}
	}
	.kill-b {
		width: 100%;
		height: px2rem(164);
		background: #fff;
		border-radius: px2rem(10);
		padding: px2rem(10);
		dl {
			dd {
				font-size: px2rem(14);
				b {
					color: red;
				}
			}
		}
	}
}
.pin {
	width: 100%;
	height: px2rem(163);
	background: #fff;
	border-radius: px2rem(10);
	margin-top: px2rem(10);
	.pin-t {
		width: 100%;
		height: px2rem(35);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 px2rem(10);
		p {
			display: flex;
			align-items: center;
			b {
				font-size: px2rem(16);
				margin: 0 px2rem(8) 0 px2rem(4);
			}
			span {
				font-size: px2rem(12);
			}
		}
		span {
			font-size: px2rem(14);
			background: #22cafd;
			padding: 0 px2rem(8);
			border-radius: px2rem(15);
			color: #fff;
		}
	}
	.pin-b {
		width: 100%;
		height: px2rem(128);
		background: #fff;
		border-radius: px2rem(10);
		padding: 0 px2rem(10);
		dl {
			dd {
				font-size: px2rem(14);
				color: red;
			}
		}
	}
}
.navs {
	width: 100%;
	height: px2rem(60);
	font-size: px2rem(16);
	padding: 0 px2rem(10);
	margin-top: px2rem(8);
	display: flex;
	justify-content: space-between;
	.da {
		width: calc(100% / 4);
		text-align: center;
		.active {
			background: orange;
			color: #fff;
		}
		span {
			font-size: px2rem(12);
			color: #000;
			padding: px2rem(3);
			border-radius: 20px;
		}
	}
}
.shop {
	width: 100%;
	// display: flex;
	// flex-wrap: wrap;
	// justify-content: space-between;
	// text-align: center;
	position: relative;
	dl {
		position: absolute;
		width: 49%;
		background: #fff;
		height: max-content;
		padding: px2rem(10);
		margin: px2rem(5) 0;
		border-radius: px2rem(10);
		dd {
			p {
				font-size: px2rem(16);
			}
			b {
				font-size: px2rem(14);
				color: red;
			}
		}
	}
}
</style>
